<template>
	<el-select v-bind="$attrs" clearable filterable multiple v-model="defaultValue" @change="onChangeSelect">
		<el-option v-for="item in props.options" :key="item.value" :value="item.value" :label="item.label" />
	</el-select>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from 'vue';

// options数据结构
interface SelectOption {
	value: any;
	label: string;
}

const defaultValue = ref<any>([]);

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: Array,
		default: [],
	},
	options: {
		type: Array<SelectOption>,
		default: () => [],
	},
});

watch(
	() => props.modelValue,
	(newValue) =>
	(
		defaultValue.value = newValue
	),
	{
		deep: true,
		immediate: true
	}

);

const onChangeSelect = (val: string) => {
	emit('update:modelValue', val);
};
</script>
<style>
.el-input__wrapper {
	width: 150px;
}
</style>
